<template>
  <div class="word">
    <Head />
    <div class="search">
      <p>人教版小学拼写</p>
      <p class="wen">
        <input type="text" placeholder="英汉互译词典输入框" />
        <img src="../assets/sousuo.png" class="pos" />
      </p>
      <img src="../assets/guanbi(1).png" @click="back()" />
    </div>
    <div class="con">
      <div class="page-bar left">
        <ul>
          <li v-if="list_in != stop">
            <a @click="before()" style="padding-left: 30%"
              ><img src="../assets/xiangshang.png"
            /></a>
          </li>
          <li v-else>
            <a class="banclick"><img src="../assets/xiangshang.png" /></a>
          </li>
          <li
            v-for="(item, index) in show_list"
            v-bind:class="{ active: list_in == index }"
            :key="index"
          >
            <a @click="select(index)" style="diplay: block">
              <p>{{ item.title }}</p>
              <p class="size">
                <span>条目{{ item.unit_total }}</span
                >- <span>已学{{ item.unit_work_total }}</span>
              </p></a
            >
          </li>
          <li v-if="start != list_in">
            <a @click="next()" style="padding-left: 30%"
              ><img src="../assets/xiangxia.png"
            /></a>
          </li>
          <!-- @click="xia()" id="xia" -->
          <li v-else>
            <a class="banclick"><img src="../assets/xiangxia.png" /></a>
          </li>
        </ul>
      </div>

      <div class="right">
        <div v-show="cur == 0">
          <p
            style="
              text-align: center;
              padding: 20px 0;
              font-size: 30px;
              color: #333333;
            "
          >
            {{ con.desc }}
          </p>
          <div class="tops">
            <div class="tab" v-for="(item, index) in sz" :key="index">
              {{ item }}
            </div>
          </div>
          <div class="keyboard">
            <div class="board">
              <div
                class="boards"
                v-for="(item, index) in boards"
                :key="index"
                @click="
                  word(item);
                  demoa(index);
                "
                :class="{ back: demo == index }"
              >
                {{ item }}
              </div>
            </div>
            <div class="board">
              <div
                class="boards"
                v-for="(item, index) in boardsb"
                :key="index"
                @click="
                  word(item);
                  demoa1(index);
                "
                :class="{ back: demo1 == index }"
              >
                {{ item }}
              </div>
            </div>
            <div class="board">
              <div
                class="boards boardss"
                v-for="(item, index) in boardsc"
                :key="index"
                @click="
                  word(item);
                  demoa2(index);
                "
                :class="{ back: demo2 == index }"
              >
                {{ item }}
              </div>
            </div>
            <div class="board">
              <div
                class="boards boardsss"
                v-for="(item, index) in boardsd"
                :key="index"
                @click="word(item)"
              >
                {{ item }}
              </div>
            </div>
            <div class="bottom">
              <span class="span1" @click="bjs">标记</span>
              <span class="span2" @click="nextt()">提交</span>
            </div>
          </div>
        </div>
        <!-- <div v-show="cur == 1"></div> -->
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import axios from "axios";
import Head from "@/components/Head.vue";
import Footer from "@/components/Footer.vue";
export default {
  name: "Word",
  components: {
    Head,
    Footer,
  },
  data() {
    return {
      demo: null,
      demo1: null,
      demo2: null,
      all: 5, //总页数
      cur: 0, //当前页码
      totalPage: 1, //当前条数
      list: [],
      show_list: [],
      list_in: 0,
      start: 12,
      stop: 0,
      con: {},
      indexss: 0,
      cons: [],
      sz: [],
      sz_index: 0,
      boards: ["A", "B", "C", "D", "E", "F", "J", "H", "I", "G"],
      boardsb: ["K", "L", "M", "N", "O", "P", "Q", "R", "S"],
      boardsc: ["小写", "T", "U", "V", "W", "X", "Y", "Z"],
      boardsd: ["SPACE", "DELETE"],
      // 定义
      bid: "",
      ida: "",

      // 返回index
      index_cs: 0,
      zonglis: [],
      indexs: 0,
      // 课程id
      course_id: "",
      //年级id
      grade_id: "",
      //类型id
      mold_id: "",
      //单元id
      unit_id: "1",
    };
  },
  created() {
    this.dataListFn();
    let str = " ";
    for (let x = 0; x < 12; x++) {
      this.sz[x] = str;
      // console.log(this.sz)
    }
    this.course_id = this.$route.query.course_id;
    this.grade_id = this.$route.query.grade_id;
    this.mold_id = this.$route.query.mold_id;
    console.log(this.$route.query,'options')
    this.dataListFn();

    // 获取id
    let as = this.$route.query.unit_id;
    console.log(as);
    // ida id值
    this.ida = as;
    // 获取index
    // let ints = this.$route.query.intex;
    // let id = this.$route.query.ida;
    // console.log(as);
    //接收返回

    let index_c = this.$route.query.intex;
    // this.index_cs = index_c;
    console.log(this.$route.query.intex, 3636);

    // console.log(index_c, 3356);
    let that = this;

    axios.interceptors.request.use(
      (config) => {
        config.headers["token"] = localStorage.getItem("token");
        return config;
      },
      (error) => {
        // 请求报错时的操作
        // // console.log(error) // for debug
        return Promise.reject(error);
      }
    );

    axios
      .get("/api/GroupExam/index", { params: { unit_id: as } })
      .then((res) => {
        that.cons = res.data.data;
        // console.log(res.data.data.neirong[index_c])
        that.con = this.cons.neirong[this.$route.query.intex || 0];
        console.log(this.con);
        that.indexss = index_c || 0;
        // console.log(that.con);
        // console.log(that.con[0], "111");
        // this.bid = this.con.id;
        // console.log(this.bid);
      });
  },
  methods: {
    bjs() {
      let a = this.con.id;
      console.log(a);
      axios.get("/api/index/sign", { id: a }).then((res) => {
        console.log(res);
      });
    },
    demoa(a) {
      let that = this;
      this.demo = a;
      console.log(a);
      setTimeout(function () {
        that.demo = null;
      }, 500);
      // console.log(this.demo);
    },
    demoa1(a) {
      let that = this;
      this.demo1 = a;
      console.log(a);
      setTimeout(function () {
        that.demo1 = null;
      }, 500);
      // console.log(this.demo);
    },
    demoa2(a) {
      let that = this;
      this.demo2 = a;
      console.log(a);
      setTimeout(function () {
        that.demo2 = null;
      }, 500);
      // console.log(this.demo);
    },
    dataListFn(index) {
      this.dellist();
      let that = this;
      console.log(index);
      console.log(this.grade_id, "this.grade_id");
      console.log(this.mold_id, "this.mold_id");
      console.log(this.course_id, "this.course_id");
      axios.interceptors.request.use(
      (config) => {
        config.headers["token"] = localStorage.getItem("token");
        return config;
      },
      (error) => {
        // 请求报错时的操作
        // // console.log(error) // for debug
        return Promise.reject(error);
      }
    );
      axios
        .get("/api/unit/index", {
          params: {
            grade_id: this.grade_id,
            mold_id: this.mold_id,
            course_id: this.course_id,
          },
        })
        .then((res) => {
          // that.list = res.data.data.jincheng.arr;
          that.list = res.data.data.danyuanjincheng.arr;
          console.log(that.list, "133");
          // this.zonglis = res.data.data;
          this.dellist();
        });
    },
    tiao() {
      let that = this;
      axios.interceptors.request.use(
      (config) => {
        config.headers["token"] = localStorage.getItem("token");
        return config;
      },
      (error) => {
        // 请求报错时的操作
        // // console.log(error) // for debug
        return Promise.reject(error);
      }
    );
      axios
        .get("/api/unit/index", {
          params: {
            grade_id: this.grade_id,
            mold_id: this.mold_id,
            course_id: this.course_id,
          },
        })
        .then((res) => {
          that.list = res.data.data.jincheng.data.total;
          console.log(res, "112");
        });
    },
    //分页
    // btnClick: function (data) {
    //   let that = this;
    //   let as = data;
    //   console.log(as);
    //   axios.get("/api/WordSpell/index", { params: { id: as } }).then((res) => {
    //     console.log(res);
    //     that.cons = res.data.data;
    //     console.log(this.cons);
    //     that.con = this.cons.neirong[0];
    //     // console.log(that.con);
    //     // console.log(that.con[0], "111");
    //   });
    // },
    select(index) {
      this.list_in = index;
      this.unit_id = this.list_in + 1;
      // console.log(this.list_in,'in')
      // console.log(this.unit_id,'this.unit_id')
      this.Wordread();
    },
    dellist(index, stop) {
      let arr = this.list;
      this.show_list = arr.slice(index || 0, stop || 6);
      console.log(this.show_list);
    },
    next() {
      this.list_in += 1;
      if (this.list_in == 6) {
        this.dellist(6, 12);
        this.list_in = 0;
        this.start = 5;
        this.stop = 12;
      }
      this.unit_id = this.list_in + 1;
      console.log(this.unit_id, "list_in");
      this.Wordread();
    },
    before() {
      this.list_in -= 1;
      if (this.start == 5 && this.list_in == -1) {
        this.dellist(0, 6);
        this.list_in = 5;
        this.start = 12;
        this.stop = 0;
      }
      this.unit_id = this.list_in + 1;
      // console.log(this.unit_id,'list_in')
      this.Wordread();
    },
    back() {
      this.$router.push("index");
    },
    // 传过去
    nextt() {
      let that = this;
      // console.log(that.sz);
      let b = this.sz.join("");
      console.log(b);
      // 获取单词
      //下一个

      // let ind = that.indexss + 1;
      // that.con = this.cons.neirong[ind];
      // console.log(that.con)
      // this.indexss = ind;

      //换页面
      // console.log(ind, 2223);

      this.$router.push({
        path: "/SpellWorda",
        query: { index_s: that.indexss, id: this.ida, conmain: b },
      });

      // 清空
      this.sz = [];
      let str = " ";
      for (let x = 0; x < 60; x++) {
        this.sz[x] = str;
        // console.log(this.sz)
      }
    },
    word(a) {
      if (a == "SPACE") {
        let arr = this.sz;
        arr.splice(this.sz_index, 1, " ");
        this.sz = arr;
        this.sz_index = this.sz_index + 1;
      } else if (a == "DELETE") {
        if (this.sz_index != 0) {
          this.sz_index = this.sz_index - 1;
          let arr = this.sz;
          arr.splice(this.sz_index, 1, " ");
          this.sz = arr;
        }
      } else if (a == "小写") {
        let boards = this.boards;
        // this.demoa = 0
        for (let i = 0; i < boards.length; i++) {
          // boards[i] = boards[i].toLowerCase();
          boards.splice(i, 1, boards[i].toLowerCase());
        }
        // boards.splice(this.boards, 1, " ");
        for (let i = 0; i < this.boardsb.length; i++) {
          this.boardsb[i] = this.boardsb[i].toLowerCase();
        }
        for (let i = 0; i < this.boardsc.length; i++) {
          this.boardsc[i] = this.boardsc[i].toLowerCase();
        }
        console.log(this.boardsc);
        this.boardsc[0] = "大写";
      } else if (a == "大写") {
        let boards = this.boards;
        for (let i = 0; i < this.boards.length; i++) {
          // this.boards[i] = this.boards[i].toUpperCase();
          boards.splice(i, 1, boards[i].toUpperCase());
        }
        for (let i = 0; i < this.boardsb.length; i++) {
          this.boardsb[i] = this.boardsb[i].toUpperCase();
        }
        for (let i = 0; i < this.boardsc.length; i++) {
          this.boardsc[i] = this.boardsc[i].toUpperCase();
        }
        console.log(this.boardsc);
        this.boardsc[0] = "小写";
      } else {
        let arr = this.sz;
        arr.splice(this.sz_index, 1, a);
        this.sz = arr;
        this.sz_index = this.sz_index + 1;
      }
    },
  },
  watch: {
    list_in() {
      console.log(this.list_in);
    },
  },
  computed: {
    //分页
    // indexs: function () {
    //   let left = 1;
    //   let right = this.all;
    //   let ar = [];
    //   if (this.all >= 5) {
    //     if (this.cur > 3 && this.cur < this.all - 2) {
    //       left = this.cur - 2;
    //       right = this.cur + 2;
    //     } else {
    //       if (this.cur <= 3) {
    //         left = 1;
    //         right = 5;
    //       } else {
    //         right = this.all;
    //         left = this.all - 4;
    //       }
    //     }
    //   }
    //   while (left <= right) {
    //     ar.push(left);
    //     left++;
    //   }
    //   return ar;
    // },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.page-bar {
  margin: 40px auto;
  margin-top: 150px;

  .size {
    margin-bottom: 1rem;
  }
}
ul,
li {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.page-bar li:first-child > a {
  margin-left: 0px;
}
.page-bar a {
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 2rem;
  color: #fff;
  cursor: pointer;
  width: 100%;
  // margin-right: 20px;
}
.page-bar a:hover {
  // background-color: #eee;
  color: #05d380;
}
.page-bar a.banclick {
  cursor: not-allowed;
  padding-left: 30%;
}

// .page-bar a.banclick img {
//   width: 80%;
// }
.page-bar .active a {
  color: #fff;
  cursor: default;
  color: #05d380;
}
.page-bar i {
  font-style: normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}
.back {
  background: #3571ff !important;
  color: #fff !important;
}
.bottom {
  // border: 1px solid red;
  display: flex;
  justify-content: space-between;
  width: 50%;
  margin: 30px auto;
  span {
    width: 200px;
    // border: 1px solid red;
    display: block;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 10px;
    cursor: pointer;
  }
  .span1 {
    background: #8556ec;
    color: #fff;
  }
  .span2 {
    background: #0dd685;
    color: #fff;
  }
}
/*分页*/
.page-bar {
  margin: 40px auto;
  margin-top: 150px;

  .size {
    margin-bottom: 1rem;
  }
}
ul,
li {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.page-bar li:first-child > a {
  margin-left: 0px;
}
.page-bar a {
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 2rem;
  color: #fff;
  cursor: pointer;
  // margin-right: 20px;
}
.page-bar a:hover {
  // background-color: #eee;
  color: #05d380;
}
.page-bar a.banclick {
  cursor: not-allowed;
  padding-left: 30%;
}

.page-bar a.banclick img {
  width: 80%;
}
.page-bar .active a {
  color: #fff;
  cursor: default;
  color: #05d380;
}
.page-bar i {
  font-style: normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}

.word {
  width: 100%;

  .search {
    width: 98%;
    padding: 0 1%;
    height: 40px;
    line-height: 40px;
    background-color: #3571ff;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding-bottom: 3px;

    .wen {
      width: 24%;
      position: relative;

      input {
        width: 100%;
        background: #ffffff;
        border-radius: 24px;
        border: 1px solid #fff;
        height: 28px;
        line-height: 28px;
        text-indent: 2.4em;
      }

      .pos {
        position: absolute;
        left: 6px;
        top: 13px;
        width: 4.5%;
      }
    }

    > img {
      width: 1%;
      height: 22px;
      margin-top: 8px;
    }
  }

  .con {
    width: 99%;
    margin-left: 1%;
    display: flex;
    justify-content: space-between;

    .left {
      width: 14%;
      background-color: #000;
      opacity: 0.7;
      color: #fff;
      margin-top: 0.6rem;

      .btn {
        img {
          width: 12%;
          // margin-left: 44%;
          margin: 1rem 44% 1rem;
        }
      }

      .list {
        margin: 2rem 0;
        margin-left: 20%;

        .size {
          font-size: 14px;
        }
      }
    }

    .right {
      width: 88%;
      border: 1px solid red;
      // margin: 0 auto;
      background-color: #f5f5f5;
      padding-bottom: 6.4rem;
      .tops {
        width: 1220px;
        margin: 0 auto;
        // border: 1px solid red;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        height: 100px;
        .tab {
          border: 1px solid red;
          width: 98px;
          height: 98px;
          line-height: 98px;
          text-align: center;
          font-size: 32px;
        }
      }
      .keyboard {
        // border: 1px solid red;
        margin-top: 10px;
        padding-bottom: 100px;
        .board {
          width: 60%;
          margin: 0 auto;
          display: flex;
          justify-content: space-around;
          .boards {
            margin-top: 20px;
            font-size: 52px;
            font-family: Arial;
            font-weight: bold;
            color: #666666;
            width: 63px;
            height: 88px;
            background: #f2f2f2;
            border: 1px solid rgba(0, 0, 0, 0.15);
            box-shadow: 0px 1px 0px 0px #ffffff;
            border-radius: 10px;
            float: left;
            text-align: center;
            line-height: 88px;
          }
          .boardsss {
            width: 40%;
          }
        }
        .board {
          .boardss:nth-child(1) {
            color: red;
            font-size: 20px;
            width: 100px;
          }
        }
      }
    }
  }
}
</style>